 <template>
	<div class="warp">
		<div class="bg content" ref="warp" v-if="flag">
			<div class="logo">
				<img src="../../../images/logo_03.png" alt="">
			</div>
			<div class="top_title">
				<!-- <img src="../../../images/title_img_03.png" alt=""> -->
				<!-- <img :src="typePIc()" alt=""> -->
				<!-- <img :src="htitleUrl" alt=""> -->
				<img src="../../assets/h1.png" alt="" v-if="type==1">
				<img src="../../assets/h2.png" alt="" v-if="type==2">
				<img src="../../assets/h3.png" alt="" v-if="type==3">
			</div>
			<!-- 中间的相框 -->
			<photoFrame>
				<div class="photo_content1">
					<!-- 头像 -->
					<div class="headers">
						<div class="head_img">
							<img :src="imageUrl" alt="">
						</div>
					</div>
					<!-- 评分 -->
					<div class="mark_item">
						<div class="marks">
							<p>{{answer.grade}}<span v-if="type==3">分</span></p>
						</div>
					</div>
					<!-- 评论内容 -->
					<div class="cont">
						<div class="mark_cont">
							<!-- 如果美貌有罪你会被关到一百岁如果追你要排队我宁愿今晚不睡! -->
							<p>{{answer.res_des}}</p>
						</div>
					</div>
				</div>
			</photoFrame>
			<!--  -->
			<div class="pika_logo1">
				<img src="../../../images/pika_right_03.png" alt="">
			</div>
			<!-- 生成二维码 -->
			<div class="a_canvas" v-if="flag">
				<canvas ref="canv"></canvas>
			</div>
			
			<div class="res_txt" v-if="flag">
				<p>长按识别二维码</p>
				<p>扫描测我的择偶倾向</p>
			</div>
			
		</div>
		<!-- 按钮 -->
		<!-- <btnWarper></btnWarper> -->
		<div class="btn-content" v-show="flag">
			<div class="btn_item">
				<span @click="poster">保存图片发朋友圈</span>
			</div>
			<div class="btn_item">
				<span @click="seeData">看看谁和我匹配</span>
			</div>
		</div>
		
		<!-- 海报图 -->
		<div class="post" v-if="ishow" ref="post">
			<img :src="newImg" alt="">
		</div>
		<div class="mask" v-if="!flag" @click="isshow"></div>
	</div>
</template>

<script>
	import photoFrame from "@/components/home/photoFrame.vue";
	import resultData from "../../../resultData.json"
	// console.log(resultData.type3.boy[0].resID)
	// import roundFrame from "@/components/home/roundFrame.vue"
	// import btnWarper from "@/components/home/btn_warper.vue";
	import html2canvas from "html2canvas";
	import QRCode from "qrcode";
	// import type1 from "../../assets/h1.jpg"
	// import type2 from "../../assets/h2.jpg"
	// import type3 from "../../assets/h3.jpg"
	export default {
		data() {
			return {
				imageUrl: '',
				Beauty: "",
				res_txt: '',
				Gender: "",
				i: "",
				flag: true,
				newImg: "",
				answer:"",
				ishow:true
				// type1:type1,
				// type2:type2,
				// type3:type3,
			}
		},
		mounted() {
			// this.Beauty = this.$route.params.Beauty
			this.getParams();
			// if (this.Gender > 50) {
			// 	this.Gender = "girl";
			// 	var num = Math.floor(Math.random() * 18);
			// 	this.i = resultData.type3.girl[num]
			// }
			// if (this.Gender <= 50) {
			// 	this.Gender = "boy";
			// 	var num1 = Math.floor(Math.random() * 18);
			// 	this.i = resultData.type3.boy[num1]
			// }
		},
		created() {
			let answer = this.getRandAnswer()
			// console.log(answer)
			this.answer = answer || ""
			// this.getParams()
			// 1.获取地址栏上的type的参数
			// const type = this.$route.query.type;
			// 从仓库中拿到type的值
			const type = this.$store.state.type;
			// 2.将type值，设置 到仓库中
			this.$store.commit('set_type',type || "1");
		},
		computed:{
			type(){
				return this.$store.state.type;
			},
			htitleUrl(){
				return this.$store.state.htitleUrl;
			},
			gender(){
				// return this.$store.state.gender
				return this.$route.params.Gender
			}
		},
		
		methods: {
			isshow(){
				console.log("1")
				this.ishow = false;
				this.flag = true
			},
			getRandAnswer(){
				// console.log(resultData['type'+this.type])
				// resultData['type'+this.type]
				const sex = this.getSex();
				console.log(sex)
				const obj = resultData['type'+this.type];
				const dataArr = obj[sex];
				// console.log(dataArr)
				// 先判断dataArr的长度
				if(dataArr.length<=1){
					return dataArr[0]
				}else{
					let rand = Math.random()*dataArr.length
					rand = rand | 0;
					return dataArr[rand]
				}
			},
			getSex(){
				let gender = this.gender;
				switch(gender){
					case 1:
						return "boy"
						// break;
					case "noface":
						return "other"
						// break;
					default:
						return "girl"
						// break;
				}
			},
			// typePIc(){
			// 	// if(this.type==1){
			// 	// 	return type1
			// 	// }
			// 	// if(this.type==2){
			// 	// 	return type2
			// 	// }
			// 	// if(this.type==3){
			// 	// 	return type3
			// 	// }
			// 	// let res=null;
			// 	switch(this.type){
			// 		case '2':
			// 			return type2
			// 		break;
			// 		case '3':
			// 			return type3
			// 		break;
			// 		default:
			// 			return type1
			// 		break
			// 	}
			// },
			getParams() {
				this.Beauty = this.$route.params.Beauty
				this.imageUrl = this.$route.params.imgUrl
				this.Gender = this.$route.params.Gender
			},
			seeData() {
				// alert('nihao')
				this.$router.push({
					path: "./fourTest",
					name: "fourTest",
					params: {
						imgUrl: this.$route.params.imgUrl,
						Gender: this.$route.params.Gender
					},
				})
			},
			poster() {
				// this.res_txt = "你好am"
				this.flag = false
				// this.$refs.preload.style.display="none"
				QRCode.toCanvas(this.$refs.canv, 'http://baidu.com',
				{
					width:100,
					height:100,
				}, function(err) {
					if (err) {
						// console.log(err);
						return
					}
					// console.log("成功")
				})
				let that = this
				html2canvas(that.$refs.warp,{useCORS:true,logging:true}).then(function(canvas) {
					// canvas.toDataUrl将canvas转为base64位
					// console.log(canvas)
					// console.log(canvas.toDataURL("image/jpg", 1))
					var dataUrl = canvas.toDataURL("image/jpg", 1)
					console.log(dataUrl)
					that.newImg = dataUrl
					// console.log(that.newImg)
					var newImg = document.createElement("img");
					newImg.src = dataUrl;
					// newImg.style = "display:block;width:100%"
					// console.log(newImg)
					// var post = document.querySelector(".post")
					// post.appendChild(newImg)
					// var odiv = document.createElement("div");
					// odiv.classList.add("post");
					// odiv.appendChild(newImg);
					// document.body.appendChild(odiv)
				})

			}
		},
		components: {
			photoFrame,
			// btnWarper
		}
	}
</script>

<style lang="scss">
	@function px2vw($px) {
		@return $px * 100/750 * 1vw;
	}

	.a_canvas {
		display: flex;
		justify-content: center;
		canvas{
			margin-top: 20px;
		}
	}

	body {
		// position: relative;
		// background-color: #ccc;
		// opacity: 0.6;
	}
	.warp .bg {
		width: 100vw;
		height: 100vh;
		background-image: url("../../../images/bg.jpg") center no-repeat;
		// background-origin: ;
		// position: fixed;
		z-index: 11;
		background-size: cover;

	}
	.mask{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #ccc;
		opacity: 0.5;
		z-index: 1;
	}
	.warp {
		width: 100vw;
		height: 100vh;
		// position: relative;
		overflow: hidden;
	}

	.warp .logo {
		z-index: 1;
		margin-top: px2vw(140);
		margin-left: 22px;
		height: px2vw(49);
		width: px2vw(121);

		img {
			display: block;
			width: 100%;
		}
	}

	.post{
		width: 90vw;
		height: 90vh;
		margin: 30px auto;
		left: 20px;
		top: 20px;
		position: absolute;
		overflow: hidden;
		z-index: 2;
		>img{
			display: block;
			// width: 100%;
			height: 100%;
		}
		p{
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	
	.top_title {
		margin-left: auto;
		margin-right: auto;
		width: px2vw(691);
		height: px2vw(357);
		position: relative;
		z-index: 11;

		img {
			display: block;
			width: 100%;
		}
	}

	.pika_logo1 {
		width: px2vw(208);
		height: px2vw(179);
		position: absolute;
		right: 0;
		top: 50%;
		z-index: 111;

		img {
			display: block;
			width: 100%;
		}
	}

	.photo_content1 {
		width: px2vw(508);
		height: px2vw(660);
		background: url(../../../images/photo_bg_03.png) center no-repeat;
		background-size: cover;
		margin-left: auto;
		margin-right: auto;
		margin-top: px2vw(-170);
		overflow: hidden;
	}

	.headers,
	.mark_item {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.headers {
		height: px2vw(188);
		margin-top: px2vw(60);
	}

	.mark_item {
		height: px2vw(84);
		margin-top: px2vw(-10);
	}

	.photo_content1 .head_img {
		width: px2vw(188);
		height: px2vw(188);
		background: url(../../../images/touxiang_03.png) center no-repeat;
		// -webkit-background-size: ;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;

		img {
			display: block;
			width: 90%;
			height: 90%;
			border-radius: 50%;
		}

	}

	.photo_content1 .marks {
		width: px2vw(204);
		height: px2vw(84);
		background: url(../../../images/marks_03.png) center no-repeat;
		background-size: cover;
		text-align: center;
		line-height: px2vw(84);

		p {
			font-size: 0.55rem;
			color: #fff;
		}
	}

	.cont {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: px2vw(20);

		.mark_cont {
			width: 50%;
			color: #fff;
			line-height: px2vw(60);
			font-size: 0.522rem;
		}
	}

	.res_txt{
		display: flex;
		justify-content: center;
		font-size: 16px;
		color: #fff;
		flex-wrap: wrap;
	}
	.right_tree {
		top: 45vw;
	}

	.btn-content {
		position: fixed;
		top: 80vh;
		left: 20%;
		z-index: 11;
	}

	.btn-content .btn_item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		font-size: 0.4rem;
		margin-top: px2vw(15);

		>span {
			// background-color: #fff;
			display: block;
			width: 62.07vw;
			height: px2vw(84);
			text-align: center;
			line-height: px2vw(84);
			;
			background: url(../../../images/btn_icon_06.png) center no-repeat;
			background-size: cover;
			margin-bottom: px2vw(20);
			color: #bd0199;
		}
	}
</style>
